<template>
  <section>
    <el-form label-width="60px" inline >
      <el-form-item label="用户">
        <filter-tool type="memberId" v-on:confirm="selMember"/>
      </el-form-item>
      <el-form-item label="电子卡" v-if="cardList">
        <el-select size="mini" v-if="cardList" v-model="selCard" value-key="id">
          <el-option v-for="card in cardList" :key="card.id" :label="card.title" :value="card"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div v-if="selCard" style="padding: 10px" class="card-detail">
      <!--<el-col :span="10" class="col-box">-->
      <el-form label-width="80px" size="mini" class="card-box">
        <el-form-item label="sn">{{selCard.sn}}</el-form-item>
        <el-form-item label="标题" >{{selCard.title}}</el-form-item>
        <el-form-item label="余量" v-if="selCard.isNumber">
          {{selCard.currValue}}{{selCard.unit}} / 共{{selCard.totalValue}}{{selCard.unit}}
        </el-form-item>
        <el-form-item label="有效期" v-if="selCard.isTime">{{timeFormatter(selCard.end)}}</el-form-item>
        <el-form-item label="扣除量" v-if="selCard.isNumber">
          <el-input v-model="value" style="width: 100px">
            <span slot="suffix">{{selCard.unit}}</span>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div style="display: flex;flex-direction: row">
            <el-button type="success" size="mini" @click="getCardBtn(selCard.sn,value)">确定</el-button>
            <el-button type="text" size="mini" @click="showServiceList(selCard.id)">消费记录>>> </el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-table :data="eCardServiceList" class="list-box" v-if="eCardServiceList">
        <el-table-column type="index"/>
        <el-table-column label="时间" prop="time" :formatter="timeFormatter"/>
        <el-table-column label="消费量" prop="value" v-if="selCard.isNumber"/>
        <el-table-column label="单位" prop="unit" v-if="selCard.isNumber"/>
      </el-table>
    </div>
  </section>
</template>

<script>
  import dateFormater from '@/common/date-formater'
  import editCard from './editCard'
  import filterTool from '@/common/filterTool'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "eCardService",
    components:{filterTool,editCard},
    data(){
      return{
        cardId:null,
        memberList:null,
        searchKey:null,
        cardList:null,
        selCard:null,
        value:null,
        eCardServiceList:null,
      }
    },
    watch:{
      selCard(nv,ov){
        console.log('选card----',nv)
        if(nv) this.value=null
      }
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      timeFormatter(a,b,c,d){
        if(a.time) return dateFormater.formatDatetime(a.time)
        else return dateFormater.format(a)
      },
      selMember(e){
        console.log('选了个啥------',e)
        this.getECardList(e.memberId)
      },
      getECardList(memberId){
        this.fetch({name:"getECardList",data:{memberId}})
          .then(res=>{
            console.log('获取电子卡服务-----------',res)
            this.cardList=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getCardBtn(eCardSn,value){
        let data={eCardSn}
        if(this.selCard.isNumber) {
          if (!eCardSn || !value || value > this.selCard.totalValue) {
            this.$message({type: 'error', message: '请确认电子卡或扣除数'})
            return
          }
          data.value=value
        }
        this.fetch({name:"consumeECard",data})
          .then(res=>{
            console.log('消费-----------',res)
            this.$message({type:'success',message:'消费成功！'})
            this.selCard=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      showServiceList(eCardId){
        //获取消费记录以显示
        this.fetch({name:"getECardServiceList",data:{eCardId}})
          .then(res=>{
            console.log('获取电子卡服务-----------',res)
            this.eCardServiceList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style lang="scss">
  .card-detail{
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  .card-box, .list-box{
    border: 1px solid #eee;
    border-radius: 5px;
    width: 500px;
    margin-right: 10px;
  }
</style>
